<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
	</head>
	<style>
		/* 相对定位，box2图片压到box1图片上 */
		div.box1{
			width: 250px;
			height: 250px;
			position: absolute;
			left: 0px;
			top: 0px;
			background: url(img/猫.png);
			background-size: 100%;
			z-index: 100;
			}
		
		
		div.box2{
			width: 250px;
			height: 250px;
			background: url(img/hellokitty.png);
			background-size: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 101;
		}
	</style>
	<body>
		<!-- 定位：相对定位  相对与父元素定位
		          功能：单一元素定位，元素在正常文档流，推荐
				positio属性：relative；生命元素可以用相对定位定义 
				        方向属性：left、right、top、bottom
						堆叠顺序属性:z-index
						
						      属性值数值，数值越大，越靠前
						绝对定位  按照定位祖先【页面左上角】进行定位
						功能：脱离文档流，不占据原空间
						方向属性和叠加属性和相对以及固定定位共用！
						position属性：absolute;声明文员可以使用绝对定位
						
						实际开发中：相对定位结合绝对定位一起使用
						           侧边栏、左栏、遮罩栏【挂靠】
						案例：左栏弹出【html结构、语义化标签+css两种定位+js】
		 -->
	</body>
	<div class="box1"></div>
	<div class="box2"></div>
</html>